<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>uc浏览器</title>
		<style>
		*{
				margin: 0;
				padding: 0;
			}
			img{
				vertical-align: bottom;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.main{
				padding-top: 70px;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			/* 由于浮动子盒撑不开父级盒，所以使用闭合浮动,子级盒可以不给内容撑开父级盒 */
			.clearfix::before,.clearfix::after{
				content:'';
				display:table;
			}
			.clearfix::after{
				clear:both;
			}
			.bd{
				border: 1px solid red;
			}
			.w{
				width: 986px;
				margin: 0 auto;
			}
			header{
				position: fixed;
				z-index: 100;
				background-color: #fff;
				width: 100%;
			}
			.logo{
				padding-top: 15px;
				padding-bottom: 12px;
			}
			.navigation{
				padding-right: 20px;
				padding-top: 5px;
			}
			.navigation>li{
				padding: 0px 10px;
				margin-left: 32px;
			}
			.current{
				border-bottom:3px solid red;
			}
			.navigation a{
				display: block;
				line-height: 62px;
				font-size: 20px;
				
			}
			/* >为子元素选择器不会影响孙元素 */
			.navigation>li:hover{
				border-bottom:3px solid green;
			}
			/* 隐藏2级导航 */
			.subnav{
				position: absolute;
				
				display: none;
			}
			/* 为二级导航项加入样式,二代选择器 ，覆盖*/
			.subnav a{
				display: block;
				line-height: 20px;
				font-size: 16px;
			}
			
			/* 一级导航项悬停时二级导航项出来 空格很重要*/
			.navigation li:hover .subnav{
				display: block;
				background: white;
			}
			.subnav li:hover{
				background-color: yellow;
			}
			.main{
				
			}
			.banner{
				height: 400px;
				background:#191919 url(images/banner.jpg)no-repeat center 0;
			}
			.icons{
				height: 145px;
				border-bottom: 1px solid gray;
			}
			
			.icon{
				
				width: 138px;
				padding-top: 58px;
				background: url(images/icon.png) no-repeat 49px 21px
			}
			.icon:nth-child(2){
				background-position: -89px 21px;
			}
			.icon:nth-child(3){
				background-position: -227px 21px;
			}
			.icon:nth-child(4){
				background-position: -366px 22px;
			}
			.icon:nth-child(5){
				background-position: -508px 21px;
			}
			.icon:nth-child(6){
				background-position: -646px 21px;
			}
			.icon:hover{
				background-position:49px -99px;
			}
			.icon:nth-child(2):hover{
				background-position: -89px -99px;
			}
			.icon:nth-child(3):hover{
				background-position: -227px -99px;
				position: relative;
			}
			/* 以下是new标记 */
			.icon:nth-child(3)::before{
			     content: "";
				width: 23px;
				height: 11px;
				
				background: url(./images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 83px;
			}
			.icon:nth-child(4):hover{
				background-position: -366px -99px;
				position: relative;
			}
			.icon:nth-child(4)::before{
				width: 23px;
				height: 11px;
				content: "";
				background: url(./images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 83px;
				
			}
			.icon:nth-child(5):hover{
				background-position: -508px -99px;
			}
			.icon:nth-child(6):hover{
				background-position: -646px -99px;
			}
			.icon a{
				display: block;
				font-size: 11px;
				line-height:82px;
				text-align: center;
			}
			.icons .w{
				position: relative;/* 相对定位 */
			}
			.twocode{
				width: 128px;
				background: url(images/twocode.png) no-repeat;
				padding-top: 106px;
				line-height: 71px;
				font-size: 11px;
				text-align: center;/* 文字剧中 */
				position: absolute;/* ju绝对定位 */
				right: -4px;
				top: -32px;
			}
			.news{
					
			} 
			.new{
				width: 290px;
				padding-right:58px ;
				}
			.news .new:nth-child(3){
				padding-right: 0;
			}	
			.title{
				padding-right: 20px;
			}
			.title h4{
				color: #575348;
				font-size: 19px;
				text-align: center;
		        line-height: 58px;
			}
			.title a{
				position: relative;
				font-size: 12px;
				line-height: 58px;
				padding-right: 10px;
			}
			.title a::before{
				content: "";
				width: 5px;
				height: 5px;
				border: 2px solid red;
				border-left:2px solid transparent ;
				border-bottom:2px solid transparent ;
				transform: rotate(45deg);
				position: absolute;
				top: 23px;
				left: 28px;
			}
			/* .title div{
				border: 2px solid red;
				width: 5px;height: 5px;
				border-left:2px solid transparent ;
				border-bottom:2px solid transparent ;
				transform: rotate(45deg);
				margin-right: 5px;
				margin-top: 10px;
			} */
			.pic{ 
				background: url(images/activity_pic.jpg) no-repeat;
				
				padding-top: 120px;
			}
			
			.pic a{
				text-align: center;
				font-size: 12px;
				line-height: 34px;
				display: block;
				background-color: #f2f2f2;
				
			}
			.new ul{}
			.new ui li{}
			.new ul li a{}
			.pic1{
				background: url(images/news_pic.jpg) no-repeat;
					padding-top: 120px;
			}
			
			.pic1 a{
				text-align: center;
				font-size: 12px;
				line-height: 34px;
				display: block;
				background-color: #f2f2f2;
				
			}
			.pic2{
				background: url(images/community_pic.jpg);
					padding-top: 120px;
			}
			.pic2 a{
				text-align: center;
				font-size: 12px;
				line-height: 34px;
				display: block;
				background-color: #f2f2f2;
				
			}
			
		</style>
	</head>
	<body>
		<!-- 语义化标签 -->
		<header class="clearfix w">
			<div class="fl logo"><img src="images/uclogo.png" alt=""></div>
			<ul class="navigation clearfix fr">
				<li class="fl current"><a href="">首页</a></li>
				<li class="fl"><a href="">下载</a>
				<ul class="subnav">
					<li><a href="">手机UC</a></li>
					<li><a href="">电脑浏览器</a></li>
					<li><a href="">TV浏览器</a></li>
				</ul>
				</li>
				<li class="fl"><a href="">公司</a></li>
				<li class="fl"><a href="">合作</a></li>
				<li class="fl"><a href="">社区</a></li>
				<li class="fl"><a href="">帮助</a></li>
			</ul>
		</header>
		<div class="main">
			<div class="banner"></div>
			<div class="icons bd">
				<div class="w clearfix">
					<div class="icon fl "><a href="">Android版下载</a></div>
					<div class="icon fl "><a href="">iPhone版下载</a></div>
					<div class="icon fl "><a href="">电脑版下载</a></div>
					<div class="icon fl "><a href="">Pad版下载</a></div>
					<div class="icon fl "><a href="">TV版下载</a></div>
					<div class="icon fl "><a href="">WP版下载</a></div>
					<div class="twocode fl ">手机扫一扫下载</div>
				</div>
			</div>
			<div class="news w clearfix">
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">活动专区</h4>
						<a href="" class="fr" >更多</a>
						<div class="fr"></div>
					</div>
					<div class="pic">
						<a href=""> 上uc.cn，下载抢100M流量礼包</a>
					</div>
					<ul>						
						<li><a href="">你没得到奖，因为你没有摇一摇</a></li>
						<li><a href="">第二季环保袋活动开放申请啦</a></li>
						<li><a href="">最壕UC微信号，天天送大奖</a></li>
						<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
						<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
					</ul>
				</div>
				        			        
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">新闻动态</h4>
						<a href="" class="fr" >更多</a>
						<div class="fr"></div>
					</div>
					<div class="pic1">
						<a href="">不断寻找合伙人</a>
					</div>
					<ul>						
						<li><a href="">神马搜索与《梦想星搭档》展开娱乐内</a></li>
						<li><a href=""> UC九游11月报告：《乱斗西游》成MOBA手</a></li>
						<li><a href="">UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
						<li><a href=""> UC浏览器新版造就极致视频体验</a></li>
						<li><a href="">手机浏览器使用频率仅次于即时通讯</a></li>
					</ul>
				</div>
								        
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">社区热帖</h4>
						<a href="" class="fr" >更多</a>
						<div class="fr"></div>
					</div>
					<div class="pic2">
						<a href=""> UC浏览器抢票帮正式发布！团结一切力量</a>
					</div>
					<ul>						
						<li><a href=""> UC浏览器Android版10.0皮肤制作教程</a></li>
						<li><a href=""> 年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
						<li><a href="">   UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
						<li><a href="">  UC姐神秘面容首次曝光，多图胆小慎入</a></li>
						<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
					</ul>
				</div>
			</div>
		</div>
		<footer></footer>
	</body>
</html>
